<template>
  <div>
    <el-form :inline="true" :model="cartForm" ref="cartForm">
      <div class="pc-page-header">
        <el-form-item label="" prop="userId">
          <el-input v-model.trim="cartForm.userId" class="pc-input3-col5" placeholder="客户ID"></el-input>
        </el-form-item>
        <el-form-item label="" prop="productId">
          <el-input v-model.trim="cartForm.productId" class="pc-input3-col5" placeholder="商品ID"></el-input>
        </el-form-item>        
        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">筛选</el-button>
          <el-button @click="resetFromFn('cartForm')">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" stripe :empty-text='emptyText'>
      <el-table-column type="index" label="序号" min-width="65"></el-table-column>
      <el-table-column prop="userId" label="客户编码" min-width="200"></el-table-column>
      <el-table-column prop="productId" label="商品编码" min-width="200"></el-table-column>
      <el-table-column prop="quantity" label="数量" min-width="200"></el-table-column>
      <el-table-column prop="productPrice" label="单价" min-width="150"></el-table-column>
      <el-table-column prop="productTotalPrice" label="总价" min-width="150"></el-table-column>
    </el-table>
    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryOrderList" :queryData="cartForm" @on-query="queryCallBackFn">
      </pc-pagination>
    </div>
  </div>
</template>
<script>
  import PcPagination from 'components/form/pagination';

  export default {
    data () {
      return {
        cartForm: {
          productStatus: '',
          userId: ''
        },
        tableData: [],
        emptyText: '',
        currentPage: 5,
        pageUrl: {
          queryOrderList: '/omc/cart/queryCartListWithPage'
        }
      };
    },
    components: {
      PcPagination
    },
    methods: {
      queryCallBackFn (res) {
        this.tableData = res.result.list;
      },
      queryDataFn () {
        this.$refs.pcPagination.queryListWithPageFn();
      }
    }
  };
</script>
